import React, { memo, Suspense  } from 'react'
import { renderRoutes } from 'react-router-config'
import { Provider } from 'react-redux' 
import { HashRouter } from 'react-router-dom'

import routes from '@/router'
import store from './store'

import MSNAppHeader from '@/components/app-header'
import MSNAppFooter from '@/components/app-footer'
import MSNAppPlayerBar from './pages/player/app-player-bar'

const App = memo(() => {
  return (
    <Provider store={store}>
      <HashRouter>
        <MSNAppHeader/>
          <Suspense fallback={<div>loading...</div>}>
          {renderRoutes(routes)}
          </Suspense>
        <MSNAppFooter/>
        <MSNAppPlayerBar/>
      </HashRouter>
    </Provider>
  )
})

export default App
